<script setup>
import { Back } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getOrderDetail } from '@/api/order.js'
import { onMounted, ref } from 'vue'

const router = useRouter()

const orderDetails = ref({})

onMounted(() => {
  getOrderDetails()
})

//获取当前订单详情
const getOrderDetails = async () => {
  const res = await getOrderDetail(router.currentRoute.value.query.id)
  console.log(res)
  if (res.data.code === 1) {
    orderDetails.value = res.data.data
  }
}
</script>

<template>
  <div class="addBrand-container">
    <div style="display: flex; align-items: center;">
      <el-icon style="margin-right: 10px; margin-bottom: 20px">
        <Back />
      </el-icon>
      <el-button type="text" @click="() => router.push('/order')" style="margin-bottom: 20px;">返回
      </el-button>
    </div>
    <div class="container">
      <h1>订单详情</h1>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="3">
          <div>订单号</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">{{ orderDetails.number }}</div>
        </el-col>
        <el-col :span="3">
          <div>下单时间</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ep-bg-purple">{{ orderDetails.orderTime }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div>订单状态</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ep-bg-purple">
            <span v-if="orderDetails.status === 1">待付款</span>
            <span v-else-if="orderDetails.status === 2">待接单</span>
            <span v-else-if="orderDetails.status === 3">待派送</span>
            <span v-else-if="orderDetails.status === 4">派送中</span>
            <span v-else-if="orderDetails.status === 5">已完成</span>
            <span v-else-if="orderDetails.status === 6">已取消</span>
            <span v-else-if="orderDetails.status === 7">退款</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div>用户名</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ">{{ orderDetails.consignee}}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">
          <div>地址</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ">{{ orderDetails.address }}</div>
        </el-col>
        <el-col :span="3">
          <div>手机号</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ">{{ orderDetails.phone }}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="orderDetails.status < 6">
        <el-col :span="3">
          <div>预计送达时间</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ">{{ orderDetails.estimatedDeliveryTime }}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="orderDetails.status === 6">
        <el-col :span="3">
          <div>取消原因</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ">{{ orderDetails.cancelReason }}</div>
        </el-col>
        <el-col :span="3">
          <div>取消时间</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ">{{ orderDetails.cancelTime }}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">
          <div>备注</div>
        </el-col>
        <el-col :span="21">
          <div class="grid-content ">{{ orderDetails.remark }}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">
          <div>零食</div>
        </el-col>
        <el-col :span="21">
          <div class="grid-content sancks" v-for="snacks in orderDetails.orderDetailList">
            <el-row :gutter="20">
              <el-col :span="6">
                <div>{{ snacks.name }} </div>
              </el-col>
              <el-col :span="6">
                <div>X{{ snacks.number }}</div>
              </el-col>
              <el-col :span="6">
                <div>{{ snacks.snacksFlavor }}</div>
              </el-col>
              <el-col :span="6">
                <div>￥{{ snacks.amount }}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-divider />

      <el-row :gutter="20">
        <el-col :span="14">
          <div>打包费</div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content ">￥{{ orderDetails.packAmount}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="14">
          <div>配送费</div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content ">￥3</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="14">
          <div>合计</div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content ">￥{{ orderDetails.amount}}</div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.addBrand-container {
  margin: 10px;
  margin-top: 10px;

  .container {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 10px;
    border-radius: 4px;

    .el-row {
      margin-bottom: 20px;

      .grid-content {
        color: #928e8e;

        span {
          margin-right: 100px;
        }
      }
    }
  }
}
</style>